<template>
  <div class="bussiness-index">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-if="roles.includes('admin')" label="总营业额" name="first">
        <div class="chart-container" v-if="activeName == 'first'">
          <el-card shadow="hover" v-hasPermi="['bussiness:qushitu']" :body-style="{ padding: '10px', height: '100%' }"
            style="flex: 1;">
            <chart1 style="height: 100%;" />
          </el-card>
          <!-- <el-card shadow="hover" v-hasPermi="['bussiness:dianpuyingyee']"
            :body-style="{ padding: '10px', height: '100%' }" style="flex: 1;">
            <chart2 style="height: 100%;" />
          </el-card> -->
        </div>
        <div class="chart-container" v-if="activeName == 'first'" v-hasPermi="['bussiness:yingyeeall']"
          style="margin-top: 10px;">
          <el-card shadow="hover" :body-style="{ padding: '10px', height: '100%' }" style="flex: 1;">
            <chart34 style="height: 100%;" />
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="店铺营业额" name="second">
        <div v-if="activeName == 'second'"  style="margin-top: 10px;"
          v-hasPermi="['bussiness:dianpubingtu']">
          <el-card shadow="hover" v-hasPermi="['bussiness:dianpuyingyee']"
            :body-style="{ padding: '10px', height: '100%' }" style="flex: 1;">
            <chart2 style="height: 100%;" />
          </el-card>
          <el-card shadow="hover" :body-style="{ padding: '10px', height: '100%' }" style="flex: 1;margin-top: 20px;">
            <div style="display: flex;height: 100%;gap: 10px;">
              <chart5 ref="chart5" style="height: 100%;" />
            </div>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>


  </div>
</template>

<script>
import chart1 from './chart/chart1.vue'
import chart2 from './chart/chart2.vue'
import chart3 from './chart/chart3.vue'
import chart4 from './chart/chart4.vue'
import chart5 from './chart/chart5.vue'
import chart34 from './chart/chart34.vue'
// import chart6 from './chart/chart6.vue'
export default {
  components: {
    chart1,
    chart2,
    chart3,
    chart4,
    chart5,
    chart34,
    // chart6
  },
  data() {
    return {
      // cardData6: {}
      activeName: 'second', // 默认激活的标签页
      roles: []
    }
  },
  created() {
    this.roles = this.$store.getters.roles;
    console.log('当前角色:', this.roles);

  },
  methods: {
    chartData5(data) {
      this.cardData6 = data
    },
    handleClick(name) {
      // this.activeName = name;
      // this.$refs.chart5.init()
    }
  }
}
</script>

<style lang="scss" scoped>
.bussiness-index {
  background-color: #f5f2f2;
  padding: 20px;
  height: calc(100vh - 80px);
  overflow-y: auto;
}

.chart-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  height: 300px;
}

.el-card {
  height: 300px;
}
</style>
